<!--
 * @Version: 1.0
 * @Date: 2021-04-07 18:42:19
 * @LastEditTime: 2021-07-12 18:46:43
 * @Description:
-->
<template>
  <div>
    <el-dialog
      :center="true"
      :title="title"
      :visible.sync="formVisibleDown"
      width="500px"
      :before-close="() => {$emit('update:formVisibleDown', false)}"
      @open="openDialog"
    >
      <div>
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          inline
          :rules="rules"
        >
          <el-form-item
            label="选择商品"
            prop="product_code"
          >
            <el-select
              v-model="ruleForm.product_code"
              placeholder="请选择商品"
            >
              <el-option
                v-for="item in productData"
                :key="item.id"
                :value="item.product_code"
                :label="item.product_code"
              />
            </el-select>
            <div style="color:#333">tip: 若无可选商品，请先添加商品映射关系</div>
          </el-form-item>
        </el-form>
        <div style="text-align: center; margin-top:50px">
          <el-button
            type="primary"
            :loading="isbtn"
            @click="submitForm('ruleForm')"
          >保存</el-button>
          <el-button @click="handleCancelDown">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    formVisibleDown: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '修改商品关联'
    },
    data: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      isbtn: false,
      ruleForm: {
        product_code: '',
        shop_id: '',
        platform_code: '',
        product_id: '',
        id: ''
      },
      productData: [],
      rules: {
        product_code: [
          { required: true, message: '商品不存在请先添加商品映射关系', trigger: 'blur' }
        ]
      }
    }
  },

  methods: {
    openDialog() {
      this.isbtn = false
      const data = this.data
      Object.keys(this.ruleForm).forEach(k => {
        this.ruleForm[k] = data[k]
      })
      data.page = 1
      data.limit = 100000000
      data.is_disable = 1
      data.type = 9
      this.$http.get('/productPlatformSku', { params: data }).then((res) => {
        if (res.code === 10000) {
          this.productData = res.data
        }
      })
    },
    // 关闭
    handleCancelDown() {
      this.$emit('update:formVisibleDown', false)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isbtn = true
          const data = this.ruleForm
          const dataobj = this.productData.filter((item) => {
            return item.product_code === data.product_code
          })[0]
          data.product_id = dataobj.product_id
          data.type = dataobj.type
          console.log(data, '>>>>>>')
          this.$http.post(`/orderRecords/updateProduct/${data.id}`, data).then((res) => {
            if (res.code === 10000) {
              this.$message.success('订单商品匹配修改成功')
              this.$emit('handleSearch')
              this.handleCancelDown()
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

 <style lang="scss" scoped>
</style>
